<template>
	<!-- 领券中心 -->
	<view class="couponCollection-main">
		<view class="redPacketList">
			<view class="redPacket-item" v-for="(item, index) in couponList" :key="item.id">
				<hwxcRedPacketItem :couponInfo="item" couponType="drawDown" @subCoupon="getsubCoupon" />
			</view>
		</view>
	</view>
</template>

<script>
import hwxcRedPacketItem from '../../components/hwxcRedPacketItem/hwxcRedPacketItem.vue';
import { userCouponList, userReceiveCoupon } from '../../api/home/index.js';
export default {
	data() {
		return {
			couponList: [],
			store_id:""
		};
	},
	components: {
		hwxcRedPacketItem
	},
	onLoad(option) {
		const { store_id } = option;
		this.store_id = store_id
		this.getUserCouponList();
	},
	methods: {
		// 获取卡券
		async getUserCouponList() {
			const resData = await userCouponList({
				store_id:this.store_id
			});
			this.couponList = resData.data;
		},

		// 领取
		async getsubCoupon(id) {
			const resData = await userReceiveCoupon({
				id
			});
			uni.showToast({
				title: '领取成功',
				icon: 'none'
			});
			this.getUserCouponList();
			setTimeout(() => {
				uni.navigateBack(-1);
			}, 500);
		}
	}
};
</script>

<style scoped lang="scss">
.redPacketList {
	box-sizing: border-box;
	padding: 20rpx;
	.redPacket-item {
		background-color: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		margin-bottom: 30rpx;
		border-left: 5px #e43927 solid;
	}
}
</style>
